<script>
//数据预览模块
import DataTableViewer from './DataTableViewer';
import TextViewer from './TextViewer';
import TripartiteViewer from './TripartiteViewer';

//数据预览加载器列表
const DATA_VIEWERS = {
  '92101': 'DataTableViewer',
  '92102': 'DataTableViewer',
  '92103': 'TextViewer',
  '92200': 'DataTableViewer',
  '92300': 'DataTableViewer',
  '92400': 'TripartiteViewer',
};

export default {
  name: 'SheetViewer',
  components: {
    DataTableViewer,
    TextViewer,
    TripartiteViewer,
  },
  data() {
    return {
      //数据ID
      dataId: null,
      //数据类型
      dataType: '',
      //数据标题
      title: '',
      //数据预览加载器
      dataViewer: null,
    };
  },
  //获取路由参数
  created() {
    this.dataId = this.$route.params.id;
    this.dataType = this.$route.params.type;
    this.dataViewer = DATA_VIEWERS[this.dataType];
  },
  methods: {
    //设置加载器信息
    setViewer(info) {
      this.title = info.title;
    },
    //导出数据
    exportData() {
      this.$refs.dataViewer.exportData();
    },
    //返回
    goBack() {
      this.$router.back(-1);
    },
  },
};
</script>

<template>
  <div class="sheetviewer-host">
    <div class="sheetviewer-header">
      <Button
        type="primary"
        class="left-btn"
        @click="goBack">
        <Icon type="chevron-left"></Icon>
        返回
      </Button>
      <Button
        type="primary"
        class="right-btn"
        @click="exportData">
        <Icon type="archive"></Icon>
        导出数据
      </Button>
      <span class="sheetviewer-title">{{ title }}</span>
    </div>
    <div class="sheetviewer-content">
      <component
        ref="dataViewer"
        :is="dataViewer"
        :data-id="dataId"
        @dataLoaded="setViewer">
      </component>
    </div>
  </div>
</template>

<style lang="less">
.sheetviewer-host {
  height: 100%;
  background-color: #ffffff;
  position: relative;
}

.sheetviewer-header {
  height: 50px;
  line-height: 50px;
  background-color: #f2f2f2;
  padding: 0 15px;
  text-align: center;
  .k-btn {
    margin-top: 10px;
  }
  .left-btn {
    float: left;
  }
  .right-btn {
    float: right;
  }
}

.sheetviewer-title {
  font-size: 16px;
  font-weight: bold;
}

.sheetviewer-content {
  position: absolute;
  top: 50px;
  right: 0;
  bottom: 50px;
  left: 0;
  overflow-y: auto;
  padding: 10px;
}
</style>
